<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="./lib/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <form action="">
                <div>
                    <span>姓名：</span>
                    <span>
                        <input type="text" v-model="uname" />
                    </span>
                </div>
                <div>
                    <span>性别：</span>
                    <span>
                        <input type="radio" id="male" value="1" v-model="gender" />
                        <label for="male">男</label>
                        <input type="radio" id="female" value="2" v-model="gender" />
                        <label for="female">女</label>
                    </span>
                </div>
                <div>
                    <span>爱好：</span>
                    <input type="checkbox" name="" id="ball" value="1" v-model="hobby" />
                    <label for="ball">篮球</label>
                    <input type="checkbox" name="" id="sing" value="2" v-model="hobby" />
                    <label for="sing">唱歌</label>
                    <input type="checkbox" name="" id="code" value="3" v-model="hobby" />
                    <label for="code">写代码</label>
                </div>
                <div>
                    <span>职业：</span>
                    <select v-model="occupation" multiple>
                        <option value="0">请输入职业...</option>
                        <option value="1">教师</option>
                        <option value="2">程序员</option>
                        <option value="3">律师</option>
                    </select>
                </div>
                <div>
                    <span>个人介绍：</span>
                    <textarea v-model="desc" cols="30" rows="10"></textarea>
                </div>
                <div>
                    <input v-on:click.prevent="handle" type="submit" value="提交" />
                </div>
            </form>
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    uname: '12',
                    gender: '1',
                    hobby: ['1', '2'],
                    // occupation: '1'
                    // 下拉框 单选用单个值 多选用数组
                    occupation: ['1', '2'],
                    desc: 'nihao'
                },
                methods: {
                    handle: function() {
                        console.log(
                            this.uname,
                            this.gender,
                            this.hobby.toString(),
                            this.occupation,
                            this.desc
                        );
                    }
                }
            });
        </script>
    </body>
</html>
